<template>
	<!-- 商城 -->
	<view class="shop-index">
		<!-- 热门商品 -->
		<view class="swiper-top" v-if="hotGoodsList.length>0">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="1000"
				:duration="1000">
				<swiper-item v-for="(item,index) in hotGoodsList" :key="index" @click="toDishesInfo(item,index)">
					<view class="swiper-item uni-bg-red">
						<img :src="item.goodsImage" alt="">
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 店铺橱窗管理 -->
		<view class="ctrl">
			<view class="ctrl-left" @click="toMyShop">
				<img src="https://file.casugn.com/storecompcard//riIuDVzv5Ob4775d717c953b08031aee9e8c28b7bb36_1681368747121.png"
					alt="">
			</view>
			<view class="ctrl-right" @click="toMyYellowCar">
				<img src="https://file.casugn.com/storecompcard//ITTU3gxuf32Ieea34af011afa9c01023df39f2106b87_1681368771650.png"
					alt="">
			</view>
		</view>
		<!-- 领券中心 -->
		<view class="coupon-center">
			<!--  -->
			<img @click="toGetCoupon"
				src="https://file.casugn.com/storecompcard//AkUhZBpMWJvj905cd2be1cf1192eafedb33518e99601_1681368145620.png"
				alt="">

		</view>
		<view class="navbar">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				直营
			</view>
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				代言
			</view>

		</view>

		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image
						:src="item.photo==null?'https://file.casugn.com/storecompcard//4T4oGCfkpPX5a59439bdbafef1bd4ed417e476813128_1660543910299.png':item.photo"
						mode="aspectFill"></image>
				</view>
				<view class="title-box">
					<text class="title clamp">{{item.name}}</text>
					<view class="price-box">
						<text>{{item.status==0?'直营':'代言'}}</text>
						<view class="add-to-car" @tap.stop="deleteClick(item)" v-if="addShop">
							<text>解绑</text>
						</view>
					</view>
				</view>

			</view>
			<view class="empty flex_column_center_center" v-if="firstLoad && !goodsList.length">
				<u-empty mode="car" iconSize="190rpx" textSize="28rpx" :text="`暂无${filterIndex?'代言':'直营'}店铺`"
					icon="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png">
				</u-empty>
				<!-- <view class="addStore">
					<u-button type="primary" color="#276AEE" text="添加店铺" @click="addStore(item,index)">
					</u-button>
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotGoodsList: [],
				current: 0,
				openId: '',
				filterIndex: 0,
				goodsList: [],
				statusMenuLists: [{
					name: '直营',
					id: 0,
				}, {
					name: '代言',
					id: 1,
				}],
				firstLoad:false
			}
		},
		onShow() {
			this.openId = uni.getStorageSync('openId').openid
			this.getHotGoods(this.openId)
			this.getMyStore()
		},
		methods: {
			//获取热门商品
			async getHotGoods(openId) {
				if (!openId) {
					return console.error('没有获取到openid')
				}
				let payload = {
					openId,
					// status: 0
				}
				let res = await this.$api.getHotGoods(payload)
				if (res.success) {
					if (res.result.records.length > 10) {
						//截取前十个
						this.hotGoodsList = res.result.records.splice(0, 10)

					} else {
						this.hotGoodsList = res.result.records
					}
				} else {
					console.log('热门商品获取失败');
					this.hotGoodsList = []
				}
			},
			//点击轮播图
			clickSwiperItem(item, index) {
				console.log(item, index)
				// let item = this.hotGoodsList[index]
				// console.log(item);
				// this.toDishesInfo(item)
			},
			// 跳转优品会小程序商品详情页面
			async toDishesInfo(item) {
				console.log("这是微信跳转")
				console.log(item)
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let flag = "1"
				wx.navigateToMiniProgram({
					appId: 'wxf5b2071cea9a5289',
					path: `standard/product/detail?productId=${item.defaultProductId}&goodsId=${item.goodsId}&openId=${this.openId}&unionId=${openId.unionId}&flag=${flag}`,
					envVersion: __wxConfig.envVersion, //获取当前用户的小程序版本（开发，体验，线上版）
					success(res) {
						// 打开成功
						console.log('跳转成功', res)
					},
					fail: err => {
						console.log('跳转失败', err);
					},
				})

			},

			//我的商城跳转
			toMyShop() {
				uni.setStorageSync('yellowCarStatus', 0)
				uni.navigateTo({
					// url: `/pagesBusiness/shopList/addShop`,
					url: `/pagesBusiness/shopList/shopList`
				})
			},
			//我的橱窗（小黄车）跳转
			toMyYellowCar() {
				uni.setStorageSync('yellowCarStatus', 1)
				uni.navigateTo({
					url: `/pagesBusiness/shopList/shopList`
				})
			},
			// 去领券
			toGetCoupon() {
				uni.navigateTo({
					url: `/pagesBusiness/coupon/couponIndex`
				})
			},
			//筛选点击
			tabClick(item) {
				console.log(item)
				let index = 0
				index = item
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;
				this.pageNo = 1
				this.goodsList = []
				this.getMyStore()
				if (index === 2) {
					// this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					// this.priceOrder = 0;
				}
				// this.pageNo = 1
				// this.goodsList = []
				// this.getGoodList()
			},

			// 获取我的门店
			getMyStore() {
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				console.log("这是状态", this.filterIndex)
				this.$api.getMyShop(openId.openid, this.filterIndex).then(res => {
					console.log(res)
					if (res.success) {
						console.log('我的店铺结果', res.result);
						this.goodsList = res.result.records||[]
					}
				}).finally(()=>{
					this.firstLoad = true
				})
			},
			//详情
			navToDetailPage(item) {
				let id = item.storeId;
				uni.setStorageSync('yellowCarStatus', 0)
				uni.navigateTo({
					url: `/pagesBusiness/goodsList/goodsList?storeId=${id}` //修复店铺传参问题,下一页面的接收参数还有goodIds ?
				})
			},

		}
	}
</script>
<style>
	page{
		height: 100%;
		background: #F7F8FA;
	}
</style>
<style scoped lang="scss">
	.shop-index {
		height: 100%;
	}

	.swiper-top {
		width: 100%;
		height: 390rpx;

		.swiper {
			width: 100%;

			height: 390rpx;

			.swiper-item {
				width: 100%;
				height: 390rpx;
				text-align: center;
				border-radius: 15upx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.ctrl {
		display: flex;
		justify-content: space-between;
		background: #ffffff;
		padding: 32rpx;

		.ctrl-left,
		.ctrl-right {
			width: 330rpx;
			height: 144rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.coupon-center {
		text-align: center;
		text-align: center;
		background: #ffffff;
		padding: 24rpx 32rpx;

		img {
			width: 686rpx;
			height: 208upx;
		}

	}

	.navbar {
		position: relative;
		display: flex;
		width: 100%;
		height: 80upx;
		z-index: 20;
		background: #fff;
		margin-top: 24upx;
		justify-content: flex-start;

		.nav-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1D2129;
			line-height: 39rpx;
			position: relative;

			&.current {
				color: #423BFE;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 48upx;
					height: 0;
					border-bottom: 4upx solid #423BFE;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: #423BFE;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 26upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 32upx;
		.empty{
			width: 100%;
			padding-top:240rpx;
			.addStore{
				width: 176rpx;
				height: 64rpx;
				margin: 16rpx auto;
			}
		}
		.list-null-box {
			width: 400upx;
			height: 82vh;
			margin: 20upx auto;
			text-align: center;
			font-size: 26upx;

			img {
				width: 300upx;
				height: 300upx;
			}
		}

		.goods-item {
			display: flex;
			flex-direction: column;
			margin-bottom: 30upx;
			width: 48%;
			padding-bottom: 20upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 280upx;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0px 0px 5px 1px rgba(154, 154, 154, 0.4);

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
				border-radius: 16rpx;
			}
		}

		.title-box {
			margin-top: 24upx;
		}

		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1D2129;
			line-height: 39rpx;
			// margin-left: 10upx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 48rpx;
			margin-top: 16rpx;
			width: 112rpx;
			height: 48rpx;
			background: #276AEE;

			text {
				margin: 0 auto;
			}

			.add-to-car {
				background: #ff0000;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48rpx;
				padding: 5upx 10upx;

				text {
					color: white;
				}
			}
		}

		.price {
			font-size: 32upx;
			color: #DC2626;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26upx;
			}
		}
	}
</style>